<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- 卡片视图 -->
      <el-card>
        <!-- 添加按钮 -->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-button type="primary" @click="addCate">添加分类</el-button>
          </el-col>
        </el-row>
        <!-- 表格 -->
        <tree-table
        class="treeTable" 
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
        :data="catelist">
            <template slot="isok" slot-scope="scope">
                <i v-if="scope.row.cat_deleted===false" class="el-icon-success" style="color:limegreen"></i>
                <i  v-else class="el-icon-error" style="color:red"></i>
            </template>
            <template slot="order" slot-scope="scope">
                <el-tag v-if="scope.row.cat_level===0" size="mini">一级</el-tag>
                <el-tag v-if="scope.row.cat_level===1" type="success" size="mini">二级</el-tag>
                <el-tag v-if="scope.row.cat_level===2" type="warning" size="mini">三级</el-tag>
            </template>
            <template slot="opt" slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" >编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button>
            </template>
        </tree-table>
        <!-- 分页 -->
        <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="qurryInfo.pagenum"
           :page-sizes="[3, 5, 10, 15]"
           :page-size="qurryInfo.pagesize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total">
      </el-pagination>
      </el-card>
      <!-- 添加分类对话框 -->
      <el-dialog
          title="添加分类"
          :visible.sync="addCatedialogVisible"
          @close="addCateDialogClosed"
          width="50%">
          <div>
              <!-- 添加分类表单 -->
              <el-form ref="addCateformRef" :model="addCateform" :rules="addCateformRules" label-width="100px">
                  <el-form-item label="分类名称：" prop="cat_name">
                      <el-input v-model="addCateform.cat_name"></el-input>
                  </el-form-item>
                  <el-form-item label="父级分类">
                      <el-cascader
                          expand-trigger="hover"
                          :options="parentCateList"
                          :props="cascaderProps"
                          v-model="selectKeys"
                          :change-on-select="true"
                          :clearable="true"
                          @change="parentCateChanged">
                      </el-cascader>
                  </el-form-item>
              </el-form>
          </div>
          <div slot="footer">
              <el-button @click="addCatedialogVisible=false">取 消</el-button>
              <el-button type="primary" @click="add">确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            qurryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            // 商品分类的数量
            catelist:[],
            // 商品总数
            total:0,
            // 为table指定列
            columns:[
                {
                    label:'分类名称',
                    prop:'cat_name',
                },
                {
                    label:'是否有效',
                    type:'template',
                    template:'isok'
                },
                {
                    label:'排序',
                    type:'template',
                    template:'order'
                },
                {
                    label:'操作',
                    type:'template',
                    template:'opt'
                }
                
            ],
            // 控制添加分类对话框的显示与隐藏
            addCatedialogVisible:false,
            // 添加分类表单
            addCateform:{
                cat_name:'',
                cat_id:0,
                cat_level:0
            },
            // 校验表单规则
            addCateformRules:{
                cat_name:{required:true,message:'请输入分类名称',trigger:'blur'}
            },
            // 父级分类
            parentCateList:[],
            // 指定级别选择对象
            cascaderProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            // 选中的父级分类的id数组
            selectKeys:[]
        }
    },
    created(){
        this.getCatelist()
    },
    // 获取商品分类
    methods: {
        async getCatelist(){
          const {data:res} = await this.$http.get('categories',{ params:this.qurryInfo })
          if(res.meta.status !==200) return this.$message.error('获取商品分类失败')
          this.catelist = res.data.result
          this.total = res.data.total
        //   console.log(res);
        },
         // 监听pagesize改变
        handleSizeChange(newSize){
            this.qurryInfo.pagesize = newSize
            this.getCatelist()
        },
        // 监听pagenum改变
        handleCurrentChange(newPage){
            this.qurryInfo.pagenum = newPage
            this.getCatelist()
        },
        //获取父级分类
       async getParentCateList(){
             const {data:res} = await this.$http.get('categories',{ params:{type:2} })
             if(res.meta.status !==200) return this.$message.error('获取父级分类失败')
             this.parentCateList = res.data
        },
        addCate(){
            this.addCatedialogVisible=true
            this.getParentCateList()
        },
        parentCateChanged(){
            if(this.selectKeys.length>0){
               this.addCateform.cat_id = this.selectKeys[this.selectKeys.length-1]
               this.addCateform.cat_level = this.selectKeys.length
               return
            }else{
                this.addCateform.cat_id = 0
                this.addCateform.cat_level = 0
            }
            // console.log(this.selectKeys);
        },
         // 添加分类确认
        add(){
            this.$refs.addCateformRef.validate(async valid =>{
                if(!valid) return
                const{data:res} = await this.$http.post('categories',this.addCateform)
                if(res.meta.status !==201){
                   this.$message.error('添加用户失败')
                }
                this.$message.success('添加成功')
                
                this.addCatedialogVisible=false
                this.getCatelist()
            })
            
            
        },
        // 监听对话框关闭事件
        addCateDialogClosed(){
            this.$refs.addCateformRef.resetFields()
            this.selectKeys=[]
            this.addCateform.cat_id = 0
            this.addCateform.cat_level = 0
        },
       
        
    },
   
    
}
</script>

<style lang="less" scoped>
.treeTable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%;
}
</style>